<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/common/head"></head>
<title>发布文章</title>
<link rel="stylesheet" th:href="@{/lib/editormd/editormd.min.css}">
<link rel="stylesheet" th:href="@{/admin/css/publish.css}">
<body>
<!-- vue入口 -->
<div id="app">
    <div :class="'app-wrapper' + sidebarFlag">
        <!-- aside -->
        <div th:replace="admin/common/side"></div>

        <!-- container -->
        <el-container class="main-container">
            <!-- header -->
            <div style="background-color: rgb(84, 92, 100);" th:replace="admin/common/header"></div>

            <!-- main -->
            <el-main class="app-main">
                <el-card>
                    <h3>发布文章</h3>
                    <el-form :model="article" ref="form">
                        <div style="margin-bottom: 6px;">
                            <el-row :gutter="100">
                                <el-col :xs="24" :sm="12" :lg="8" :span="8">
                                    <el-form-item required prop="title" :rules="[{ required: true, message: '请输入文章标题'}]">
                                        <el-input v-model="article.title" placeholder="请输入文章标题">
                                            <template slot="prepend">文章标题</template>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :lg="8" :span="8">
                                    <el-form-item required prop="origin" :rules="[{ required: true, message: '请输入文章来源'}]">
                                        <el-input v-model="article.origin" placeholder="请输入文章来源，默认来自本系统">
                                            <template slot="prepend">文章来源</template>
                                            <span v-text="article.origin"></span>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :lg="8" :span="8" style="padding-top:10px;">
                                    <el-radio v-model="article.type" label="0">原创</el-radio>
                                    <el-radio v-model="article.type" label="1">转载</el-radio>
                                </el-col>
                            </el-row>
                            <el-row :gutter="100">
                                <el-col :xs="24" :sm="12" :lg="8" :span="8" class="category" style="padding-top:10px;">
                                    <el-tooltip class="item" effect="dark" content="下拉框中没有？可直接键入" placement="top-start">
                                        <el-form-item required prop="category" :rules="[{ required: true, message: '请选择文章分类'}]">
                                            <el-select v-model="article.category" allow-create filterable
                                                       placeholder="请选择文章分类">
                                                <el-option
                                                        v-for="item in options"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-tooltip>
                                </el-col>
                                <el-col :xs="24" :sm="12" :lg="6" :span="12" style="padding-top:10px;">
                                    <div>
                                        <el-form-item>
                                            <el-tag
                                                    :key="tag"
                                                    v-for="tag in dynamicTags"
                                                    closable
                                                    :disable-transitions="false"
                                                    @close="handleCloseTag(tag)" v-text="tag">
                                            </el-tag>
                                            <el-input
                                                    class="input-new-tag"
                                                    v-if="inputVisible"
                                                    v-model="article.tags"
                                                    ref="saveTagInput"
                                                    size="small"
                                                    @keyup.enter.native="handleInputConfirm"
                                                    @blur="handleInputConfirm"></el-input>
                                            <el-button v-else class="button-new-tag" size="small" @click="showInput">+文章标签
                                            </el-button>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div id="article">
                            <textarea id="article-editor-md" ref="articleEditorMd" name="article-editor-md"></textarea>
                        </div>
                        <div style="float: right;margin-bottom: 15px;">
                            <el-row :gutter="20">
                                <el-col :xs="24" :sm="24" :lg="24" :span="12">
                                    <el-button type="primary" @click="publishBtn('form', 0)">存入草稿</el-button>
                                    <el-button type="warning" @click="publishBtn('form', 1)">发布文章</el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </el-form>
                </el-card>
            </el-main>
        </el-container>
    </div>
</div>
</body>
<script type="text/javascript" th:src="@{/lib/editormd/jquery-3.3.1.min.js}"></script>
<div th:replace="admin/common/js"></div>
<script type="text/javascript" th:src="@{/lib/editormd/editormd.min.js}"></script>
<script type="text/javascript" th:src="@{/admin/js/publish.js}"></script>
<script type="text/javascript">
    /**
     * Markdown工具配置
     */
    var markdownContent = editormd('article', {
        htmlDecode: true,
        width: '100%',
        height: 540,
        syncScrolling: "single",
        path: '../../../lib/editormd/lib/',
        saveHTMLToTextarea: true,

        emoji: true,
        watch: false,
        codeFold: true,
        taskList: true,
        tex: true, // 默认不解析
        flowChart: true, // 默认不解析
        sequenceDiagram: true, // 默认不解析

        toolbarIcons: function () {
            return ["undo", "redo", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "h1", "h2", "h3", "|", "list-ul", "list-ol", "|", "link", "reference-link", "image", "code", "preformatted-text", "table", "datetime", "emoji", "html-entities", "goto-line", "|", "preview", "fullscreen", "", "||", "watch"];
        },
    });
</script>
</html>
